<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <meta name="description" content="">
    <meta name="author" content="">

    <title>跳蚤市场</title>

    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

    <!-- jQuery文件，务必在bootstrap.min.js 之前引入，否则导致小屏幕点击不出现下拉框 ，版本过低也会-->
    <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>

<body>

<%@include file="WEB-INF/jsp/normal/navbar.jsp"%>

<h1 class="page-header" style="margin-top: 70px;margin-left: 10px;">物品分类</h1>
<!-- 商品分类 -->
<div class="container-fluid">
    <div class="row">

        <!-- <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main"> -->

        <!-- 如果图片出错，去掉img-responsive 加上width="200" height="200" -->
        <div class="row placeholders text-center">

            <%--<c:forEach items="${typeList}" var="type">--%>

                <%--<div class="col-xs-4 col-sm-2 placeholder" style="margin-top: 10px">--%>

                    <%--<a href="/goods_type.jsp">--%>
                        <%--<img class=" img-rounded center-block" src="${type.type_img}"--%>
                             <%--class="img-responsive" alt="Generic placeholder thumbnail">--%>
                    <%--</a>--%>

                    <%--<h4 >${type.type_name}</h4>--%>
                <%--</div>--%>


            <%--</c:forEach>--%>

            <%
                String [] path =new String[]{
                        "/market/images/backpack.png","/market/images/hamburger.png",
                        "/market/images/bookshelf.png","/market/images/mcfly.png",
                        "/market/images/toaster.png","/market/images/speakers.png",
                        "/market/images/medicine.png","/market/images/calc.png",
                        "/market/images/umbrella.png","/market/images/car.png",
                        "/market/images/watch.png","/market/images/store.png"};
                String [] name = new String[]{
                        "鞋包","零食","书籍","服饰","小家电","数码产品",
                        "医药","文具","生活用品","车用产品","配饰","其他"};

                for(int i = 0;i < path.length;i++){

            %>

            <div class="col-xs-4 col-sm-2 placeholder" style="margin-top: 10px">
                <!--如何将相应的数据传到下一个jsp  ，循环使得只能得到最后一个name-->
                <%--  <%
                 session.setAttribute("typename"+i, name[i]);
                 %> --%>
                <a href="/goods_type.jsp">
                    <img class=" img-rounded center-block" src="<%=path[i]%>"
                         class="img-responsive" alt="Generic placeholder thumbnail">
                </a>

                <h4 ><%=name[i] %></h4>
            </div>

            <%} %>


        </div>
    </div>

    <!-- 商品展示 -->
    <h3 class="sub-header " style="margin-top: 30px;margin-left: 10px;"> 商品展示</h3>

    <div class="container-fluid ">
        <div class="row " >

            <%
                /*放管理员指定的十个商品 ,从数据库中读的数据并传到该界面*/
                for(int i = 0;i < 10;i++){
            %>

            <div class="panel panel-default col-xs-11 col-sm-2"  style=" margin: 21px;" >
                <div class="panel-body">
                    <!-- <div class="row">  发布者头像和名字
                        <div class="left-context  col-sm-3 col-xs-2 ">
                            <img alt="img_head" src="pro/images/flower.png" class=" img-circle img-responsive" >
                        </div>
                        <div class="right-context col-sm-9 col-xs-10">
                                   用户名
                        </div>
                    </div> -->

                    <div class="row" style="margin-top: 10px;">
                        <a href="/WEB-INF/jsp/normal/goods_details.jsp">
                            <img alt="img_detail" src="/market/images/kj.png" class=" img-rouded img-responsive" height="20%">
                        </a>
                        <p style="margin-top: 10px ; color:red"><big>¥10.0...</big></p>
                        <p style="margin-top: 10px"><small>商品描述...</small></p>
                        <a>卖家信息</a>
                    </div>

                </div>
            </div>

            <%} %>


        </div>
    </div>
</div>

</body>
</html>
